<template>
  <a-layout id="layout-pc">
    <a-layout-header id="pc-header">
      <main-title version="v4.0" title="Alpha" :content-expand="contentExpand"
        @toggle-content-expand="toggleContentExpand" />
    </a-layout-header>

    <a-layout id="pc-main">
      <a-layout-sider id="pc-main-sider" theme="light" v-model:collapsed="collapsed" :width="200" :style="{
        background: '#e5e5e5',
      }" :trigger="null" collapsible>
        <CaretRightOutlined v-if="collapsed" class="mytrigger" @click="() => (collapsed = !collapsed)" />
        <CaretLeftOutlined v-else class="mytrigger" @click="() => (collapsed = !collapsed)" />

        <sider-bar />
      </a-layout-sider>

      <a-layout-content id="pc-main-content" :style="{
        background: '#f6f6f6',
        minHeight: '450px',
        height: 'calc(100% - 25px)',
      }">
        <router-view />
      </a-layout-content>

      
    </a-layout>

    <a-layout-footer id="pc-footer" :style="{
      background: '#dddddd',
      height: '25px',
    }">
      <footer-bar />
    </a-layout-footer>
  </a-layout>
</template>

<script setup>
import { ref } from "vue";
import { CaretRightOutlined, CaretLeftOutlined } from "@ant-design/icons-vue";

const collapsed = ref(false);
const contentExpand = ref(false);

</script>

<style lang="less">
.mytrigger {
  font-size: 15px;
  border-radius: 15px;
  padding: 20px 1px;
  transition: color 0.3s;
  color: #a1a1a1;
  border: #ccc solid 1px;
  background-color: #f0f0f0;
  right: -11px;
  position: absolute;
  z-index: 999;
  top: 38%;

  &:hover {
    background-color: #f6fee8 !important;
    box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
    color: #474747;
  }
}
</style>
